<template>
    <div>
        <div class="notify-list">
            <div style="display: table-row">
                <div class="table-title" style="width: 5%"></div>
                <div class="table-title" style="text-align: left">
                    名称
                </div>
                <div class="table-title" style="text-align: center">
                    发布时间
                </div>
                <div class="table-title" style="text-align: center">
                    状态
                </div>
                <div class="table-title" style="text-align: center"></div>
            </div>

            <template v-for="(item, index) in dataList">
                <div v-if="item.type === 1" :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row;" :key="index">
                    <div class="table-cell" style="text-align: center; width: 10%">
                        {{index+1}}
                    </div>
                    <div class="table-cell" style="text-align: left; width: 50%">
                        {{item.title}}
                    </div>
                    <div class="table-cell" style=" text-align: center; width: 20%">
                        {{getDate(item.create_timestamp)}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: red" v-if="item.isRead===0">
                        待阅读
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: limegreen" v-if="item.isRead===1">
                        已阅读
                    </div>
                    <div class="message-list-item" style="width: 5%;">
                        <el-button class="detail" size="mini" @click="readNotify(item)" style="size: 100px">详情</el-button>
                    </div>
                </div>
                <div v-if="item.type === 2" :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row;" :key="index">
                    <div class="table-cell" style="text-align: center; width: 10%">
                        {{index+1}}
                    </div>
                    <div class="table-cell" style="text-align: left; width: 50%">
                        {{item.title}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 20%">
                        {{getDate(item.create_timestamp)}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: red" v-if="item.isRead===0">
                        待阅读
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: limegreen" v-if="item.isRead===1">
                        已阅读
                    </div>
                    <div class="message-list-item" style="width: 5%;">
                        <el-button class="detail" size="mini" @click="readNotify(item)" style="size: 100px">详情</el-button>
                    </div>
                </div>
                <div v-if="item.type === 3" :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row;" :key="index">
                    <div class="table-cell" style="text-align: center; width: 10%">
                        {{index+1}}
                    </div>
                    <div class="table-cell" style="text-align: left; width: 50%">
                        {{item.title}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 20%">
                        {{getDate(item.create_timestamp)}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: red" v-if="item.isRead===0">
                        待阅读
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: limegreen" v-if="item.isRead===1">
                        已阅读
                    </div>
                    <div class="message-list-item" style="width: 5%;">
                        <el-button class="detail" size="mini" @click="readMessage(item)" style="size: 100px">详情</el-button>
                    </div>
                </div>
                <div v-if="item.type === 4" :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row;" :key="index">
                    <div class="table-cell" style="text-align: center; width: 10%">
                        {{index+1}}
                    </div>
                    <div class="table-cell" style="text-align: left; width: 50%">
                        {{item.title}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 20%">
                        {{getDate(item.create_timestamp)}}
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: red" v-if="item.isRead===0">
                        待阅读
                    </div>
                    <div class="table-cell" style="text-align: center; width: 15%; color: limegreen" v-if="item.isRead===1">
                        已阅读
                    </div>
                    <div class="message-list-item" style="width: 5%;">
                        <el-button class="detail" size="mini" @click="readNotify(item)" style="size: 100px">>详情</el-button>
                    </div>
                </div>
            </template>
        </div>

        <div class="pagination-class">
        <el-pagination
                @current-change=currentChange
                :current-page.sync=currentPage
                :page-size="size"
                layout="prev, pager, next, jumper"
                :total=total
                style="margin-right: 40px">
        </el-pagination>
    </div>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import API from '../../api'
    import Test from "../../pages/person/index";

    export default {
        name: "ph_notify",
        components: {Test},
        data(){
            return{
                token: Cookies.get('token'),
                type: Cookies.get('type'),
                dataList:[],
                inMain: false,
                total:0,
                currentPage:1,
                size:30
            }
        },

        mounted:function(){
            this.getDatalist();
        },

        methods:{
            /**
             * 阅读
             * */
            readNotify(item){
                if(item)
                    this.$router.push({path: `/phone/notify/`+item.query_id+`/detail`}) //手机端详情接好之后接手机端的详情界面
            },
            readMessage(item){
                if(item)
                    this.$router.push({path: `/phone/message/` + item.relate_id + `/detail`}) //手机端详情接好之后接手机端的详情界面
            },

            /**
             * 页面
             * */
            currentChange(val){
                this.currentPage = val;
                this.getData();
            },

            /**
             * 计算发布时间
             * */
            getDate(timestamp) {
                var now = new Date(timestamp),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate();
                return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " "
            },

            /**
             * 得到通知提醒列表
             */
            getDatalist(){
                let data={
                    token:this.token,
                    orderby: {},
                    page: 1,
                    size: 30,
                };
                API.AllNotify(data).then(res=>{
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    this.dataList=res.list;
                }).catch(msg => {
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    alert(msg);
                });
            },
        }
    }
</script>

<style scoped>
    .notify-list {
        display: table;
        width: 100%;
        padding: 20px 10px 15px;
    }
    .table-title{
        display: table-cell;
        font-size: 15px;
        text-align: center;
        color: rgb(128, 128, 128);
    }
    .table-cell{
        display: table-cell;
        font-size: 12px;
        text-align: center;
    }
    .pagination-class {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 5%;
        padding-bottom: 15px;
        padding-top: 10px;
    }
    .detail {
        display: table-cell;
        color: #fff;
        background: rgb(80, 137, 185);
    }
</style>
